<template>
  <el-drawer
    :model-value="isShow"
    direction="rtl"
    :show-close="false"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :title="!!curRecord ? '编辑***' : '创建***'"
    @open="onOpen"
    @closed="onCancel"
    size="500px"
  >
    <div class="pr-20">
      <el-form
        class="edit-form"
        :model="formData"
        ref="formRef"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入****" />
        </el-form-item>
        <el-form-item label="cron表达式" prop="logicConfig">
          <el-input
            v-model="formData.logicConfig"
            placeholder="请输入cron表达式"
          >
            <template #append>
              <el-tooltip content="配置cron表达式" placement="top">
                <el-button
                  :icon="ArrowDown"
                  @click="
                    () => {
                      isShowCronCore = !isShowCronCore;
                    }
                  "
                />
              </el-tooltip>
            </template>
          </el-input>
        </el-form-item>
        <div
          style="width: 100%; padding-left: 10px; margin-top: -5px"
          v-show="isShowCronCore"
        >
          <yu-cron @change="changeCron" v-model:value="formData.logicConfig" />
        </div>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="onCancel">取 消</el-button>
        <el-button
          type="primary"
          v-if="modalType != 'view'"
          :loading="submiting"
          @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </template>
  </el-drawer>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';

// 其他代码省略*******// 定义数据
const isShowCronCore = ref(true); // 是否打开cron表达式配置框
const submiting = ref(false); // 是否正在提交中
const formRef = ref(null);
const formData = reactive({
  // 表单数据
  name: '', // 名称
  logicConfig: '* * * * * ? *', // cron表达式
});

const changeCron = val => {
  if (typeof val !== 'string') return false;
  formData.logicConfig = val;
};
</script>
